<template>
 <transition name="showbox">
    <div class="login" v-show="flag">
      <div class="close" @click="close">
        X
      </div>
      
      <div class="login-wrap" v-show="showLogin">
         <h3>登录</h3>
         <p v-show="showTishi">{{tishi}}</p>
         <input type="text" placeholder="请输入用户名" v-model="username"/>
         <input type="password" placeholder="请输入密码" v-model="password"/>
         <div class="btn" @click="login">登录</div>
        <span @click="ToRegister">没有账号？马上注册</span>
      </div>
      <div class="register-wrap" v-show="showRegister" >
        <h3>注册</h3>
        <p v-show="showTishi">{{tishi}}</p>
        <input type="text" placeholder="请输入用户名" v-model="username"/>
        <input type="text" placeholder="请输入账户" v-model="account"/>
        <input type="password" placeholder="请输入密码" v-model="password"/>
        <div class="btn" @click="register">注册</div>
        <span @click="ToLogin">已有账号？马上登录</span>
      </div>
    </div>
 </transition>
</template>
<script>
import * as myfunc from "../../commom/js/myfunc"
  export default{
    data(){
      return{
        flag:false,
        showLogin: true,
        showRegister: false,
        showTishi: false,
        tishi: '',
        username: '',
        account:'',
        password: '',
        newUsername: '',
        newPassword: ''
      }
    },
    methods:{
      login(){//登录
        this.$http.post(this.serverurl+'user/login',{
          psw:this.password,
          account:this.username
        }).then((result)=>{
          
          let info = result.data;
          console.log(info)
          if(info.status == 200){
             myfunc.setlocalstorage(info.data)
             this.$emit("isshowlogin")
            this.flag = false;
          }else{
            alert("密码或用户名错误")
          }
        })
      },
      register(){//注册
        this.$http.post(this.serverurl+'user/assign', {
          name:this.username,
          psw:this.password,
          account:this.account
        }).then((result)=>{
          let info = result.data;
          if(info.status == 200){
            myfunc.setlocalstorage(info.data)
            this.$emit("isshowlogin")
            this.flag = false;
          }
        }, (err)=>{
          console.log(err)
        });
      },
      ToRegister(){
          this.showRegister = true;
          this.showLogin = false;
      },
      ToLogin(){
          this.showRegister = false;
          this.showLogin = true;
      },
      open(){
        this.flag = true;
      },
      close(){
        this.flag = false;
      }
    }
  }
</script>
<style lang="less" scoped>
.login{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 999;
  >div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
  }
  .close{
    cursor: pointer;
    left: 90%;
    top: 10%;
    transform: translate3d(0,0,0);
    width: 4rem;
    border-radius: 50%;
    text-align: center;
    line-height: 4.2rem;
    height: 4rem;
    font-size: 2rem;
    background-color: #fff;
    color:black;
  }
  h3{
    font-size: 3.8rem;
    color: #fff;
    margin-bottom: 1.6rem;
  }
  .login-wrap,.register-wrap{
    text-align:center;
    input{
      display:block;
      width:25.0rem;
      height:4.0rem;
      line-height:4.0rem;
      margin:0 auto;
      margin-bottom: 1.4rem;
      outline:transparent;
      border: 0;
      border-radius: 1rem;
      padding:1rem;
      box-sizing:border-box;

    }
    p{
      color:red;
      margin-bottom: 1.2rem;
    }
    .btn{
      cursor: pointer;
      display:block;
      border-radius: 1rem;
      width:29.0rem; 
      height:4.0rem; 
      line-height: 4.25rem;
      margin:0 auto; 
      border:none; 
      background-color:#41b883; 
      color:#fff; 
      font-size:1.6rem;
      margin-bottom:1rem;
    }
    span{
      color: rgb(139, 139, 139);
      cursor:pointer;
    }
    span:hover{
      color:#41b883;
    }
  } 
}
.showbox-enter-active,.showbox-leave-active {
  transition: all 0.4s ease;
}
.showbox-enter, .showbox-leave-to
{
  transform: translateX(100%);
  opacity: 0;
}


</style>